import type { FormSchema } from '@/components/form/index';
import { dateDayjs, getRanges } from '@/utils/date';

export const schemas: FormSchema[] = [
    {
        label: '基础表单组件使用',
        field: 'divider1',
        colProps: { span: 24 },
        component: 'Divider',
    },
    {
        label: 'input输入框',
        field: 'name',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'Input',
        componentProps: { maxlength: 60, placeholder: '请输入' },
        rules: [{ required: true }],
    },
    {
        label: '带默认值的输入框',
        field: 'defName',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        defaultValue: '我是默认值',
        component: 'Input',
        componentProps: { maxlength: 60, placeholder: '请输入' },
        rules: [{ required: true }],
    },
    {
        label: '数字输入框',
        field: 'number',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'InputNumber',
        componentProps: { max: 200, placeholder: '请输入' },
        rules: [{ required: true }],
    },
    {
        label: '下拉选项框',
        field: 'selectValue',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'Select',
        componentProps: {
            options: [
                { value: 1, label: '选项一' }, { value: 2, label: '选项二' },
                { value: 3, label: '选项三' }, { value: 4, label: '选项四' },
            ],
        },
        rules: [{ required: true, trigger: 'blur', }],
    },
    {
        label: '下拉选项框多选',
        field: 'selectMult',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'Select',
        componentProps: {
            mode: 'multiple',
            options: [
                { value: 1, label: '选项一' }, { value: 2, label: '选项二' },
                { value: 3, label: '选项三' }, { value: 4, label: '选项四' },
            ],
        },
    },
    {
        label: '树形选择框',
        field: 'treeSelect',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'TreeSelect',
        componentProps: {
            treeData: [
                { value: 1, title: '选项一', children: [
                        { value: 11, title: '子选项一', children: [
                            { value: 111, title: '三级选项一' },
                            { value: 112, title: '三级选项二' },
                            { value: 113, title: '三级选项三' },
                            { value: 114, title: '三级选项四' },
                        ],
                    }, 
                        { value: 12, title: '二级选项二' },
                        { value: 13, title: '二级选项三' },
                        { value: 14, title: '二级选项四' },
                    ],
                }, 
                { value: 2, title: '选项二', children: [
                        { value: 21, title: '二级选项一' },
                        { value: 22, title: '二级选项二' },
                        { value: 23, title: '二级选项三' },
                        { value: 24, title: '二级选项四' },
                    ],
                }, 
                { value: 3, title: '选项三' }, 
            ],
        },
    },
    {
        label: '多选框',
        field: 'checkbox',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'CheckboxGroup',
        componentProps: {
            options: [
                { value: 1, label: '选项一' }, { value: 2, label: '选项二' },
                { value: 3, label: '选项三' }, { value: 4, label: '选项四' },
            ],
        },
    },
    {
        label: '单选框',
        field: 'radio',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'RadioGroup',
        defaultValue: 1,
        componentProps: {
            options: [
                { value: 1, label: '选项一' }, { value: 2, label: '选项二' },
                { value: 3, label: '选项三' }, { value: 4, label: '选项四' },
            ],
        },
    },
    {
        label: '联级选框',
        field: 'cascader',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'Cascader',
        componentProps: {
            options: [
                { value: 'guangdong', label: '广东省', children: 
                    [{ 
                        value: 'guangzhou', label: '广州', children: [
                            { value: 'yuexiu', label: '越秀区' },
                            { value: 'baiyun', label: '白云区' },
                            { value: 'tianhe', label: '天河区' },
                            { value: 'haizhu', label: '海珠区' },
                            { value: 'nanhai', label: '南海区' },
                        ],
                    },{ 
                        value: 'shenzhen', label: '深圳', children: [
                            { value: 'futian', label: '福田区' },
                            { value: 'louhu', label: '罗湖区' },
                            { value: 'longgang', label: '龙岗区' },
                            { value: 'longhua', label: '龙华区' },
                            { value: 'guangming', label: '光明区' },
                        ],
                    }]
                },
            ],
        },
    },
    {
        label: '年选择框',
        field: 'year',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'YearPicker',
        componentProps: {
            format: 'YYYY',
            valueFormat: 'YYYY',
        },
    },
    {
        label: '月选择框',
        field: 'month',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'MonthPicker',
        componentProps: {
            format: 'YYYY-MM',
            valueFormat: 'YYYY-MM',
        },
    },
    {
        label: '日期选择框',
        field: 'date',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'DatePicker',
        // 设置日期默认值
        defaultValue: dateDayjs(new Date).startOf('month').add(4, 'day').format('YYYY-MM-DD'),
        componentProps: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
        },
    },
    {
        label: '时间选择框',
        field: 'time',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        component: 'TimePicker',
        componentProps: {
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
        },
    },
    {
        label: '联级日期选择',
        field: '[beginDate, endDate]',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        // 设置日期时间选择默认值
        defaultValue: [
            dateDayjs(new Date).startOf('month').format('YYYY-MM-DD'),
            dateDayjs(new Date).startOf('month').add(6, 'day').format('YYYY-MM-DD')
        ],
        component: 'RangePicker',
        componentProps: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            placeholder: ['开始日期', '结束日期'],
            presets: getRanges(['今天', '本月', '过去7天', '过去30天', '过去90天']),
        },
    },
    {
        label: '联级日期时间选择',
        field: '[beginDateTime, endDateTime]',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 },
        // 设置日期时间选择默认值
        defaultValue: [
            dateDayjs(new Date).startOf('month').hour(0).minute(0).format('YYYY-MM-DD HH:mm'),
            dateDayjs(new Date).startOf('month').add(6, 'day').hour(23).minute(59).format('YYYY-MM-DD HH:mm'),
        ],
        component: 'RangePicker',
        componentProps: {
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm',
            placeholder: ['开始时间', '结束时间'],
            showTime: { format: 'HH:mm', defaultValue: [dateDayjs('00:00', 'HH:mm'), dateDayjs('23:59', 'HH:mm')] },
            presets: getRanges(['今天', '本月', '过去7天', '过去30天', '过去90天']),
        },
    },
    {
        label: '图片上传',
        field: 'imgFiles',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
        component: 'UploadImg',
        componentProps: { maxCount: 3 },
    },
    {
        label: '附近上传',
        field: 'files',
        colProps: { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
        component: 'UploadFile',
        componentProps: { maxCount: 3 },
    },
    {
        label: '多行文本框',
        field: 'textarea',
        colProps: { span: 24 }, 
        component: 'InputTextArea',
        componentProps: {
            placeholder: '请填写描述信息...',
            rows: 2,
            // showCount: true, // 是否显示数字
            // maxlength: 100, // 设置输入限制
        },
    },
    {
        label: '富文本',
        field: 'content',
        colProps: { span: 24 }, 
        component: 'WangEditor',
        componentProps: { height: 450, },
    },
];